<template>
  <div v-loading="loading">
    <Table :data="dataRows" size="small" stripe>
      <TableColumn v-for="col in columns" :height="height" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width" :min-width="col.minWidth" />
      <TableColumn width="80">
        <a-button slot-scope="{row}" size="small" icon="delete" @click.stop="doDelete(row)">移除</a-button>
      </TableColumn>
    </Table>
  </div>
</template>
<script>
import {Table, TableColumn} from 'element-ui'
export default {
  components: {Table, TableColumn},
  props: {
    dataUrl: String,
    columns: Array,
    queryParams: Object,
    height: Number
  },
  data() {
    return {
      dataRows: null,
      loading: false,
      queryDataRows: window.$debounce(this._queryDataRows),
    }
  },
  mounted() {
    this.init()
  },
  watch: {
    queryParams() {
      this.queryDataRows()
    },
  },
  methods: {
    init() {
      this.queryDataRows()
    },
    _queryDataRows() {
      // 查询中间表数据必须要带参数
      if (!this.queryParams) {
        this.dataRows = []
        return
      }
      this.loading = true
      this.$http.post(this.dataUrl, this.queryParams).then((rs) => {
        this.loading = false
        const result = rs.data
        if (result.success) {
          this.dataRows = result.data
        } else {
          this.dataRows = []
        }
      })
    },
    doAdd() {
    },
    doDelete(data) {
      this.$http.get(this.deleteUrl + data.id).then((rs) => {
        const result = rs.data
        if (result.success) {
          this.queryDataRows()
        } else {
          this.$message.error(result.message)
        }
      })
    }
  }
}
</script>
